¡Hola 👋! Espera mientras comienza la sesión.

Antes que todo, ¿cómo están?

Visualización de Información

IIC2026 2021-2

¡Visualización del día!

Dear Data como exposición en Museo de Arte Moderno en Nueva York.

Propuesta por mi.

(Fuente: Exposión MoMa NY Octubre 2021)

Brushing, agregación
y vistas en D3.js

Visualización de Información

IIC2026 2021-2

Contenido

Contenido


1. d3-brush y panorámica-detalle

2. Agregación e histogramas con D3.js

3. Gráfico de dispersión agregado y hexbin

¡Actividad grupal!

Cada grupo asignado a una Sala de Zoom debe completar en conjunto un programa de JavaScript que extiende un documento HTML. Los objetivos a lograr como grupo son:

  1. Escribir una lista no ordenada en el documento HTML con los nombres de las personas que forman el grupo.
  2. El primer objetivo es limitar la extensión del brushing sobre el gráfico de dispersión a solo la región que le incumbe.
  3. Luego, hay que completar la función que obtiene los datos seleccionados a partir del brushing y les pone énfasis en el gráfico mediante color.
  4. Luego, completar la función que genera la caja calculando los valores estadísticos de los datos seleccionados.
  5. Luego pueden hacer que la visualización comience con un cuadrado de 100 x 100 en la esquina superior derecha del gráfico de dispersión.
  6. Luego pueden personalizar como quieran.

¡Actividad grupal!


Les recomendamos que por grupo asignen:

  • Al menos una persona que tenga el material del curso y documentación de D3.js a mano para consultarla.
  • Al menos una persona pendiente de las dudas que surjan para solicitar ayuda durante la actividad.
  • Al menos una persona que se encargue de escribir y extender el documento HTML y programa JavaScript.
  • El resto puede apoyar a quienes escriban o a otros roles.

¡Actividad grupal!


Para colaborar en el código, pueden:

El equipo docente les preparó salas en Coding Rooms. Para ingresar y colaborar deben entrar a un enlace y luego:

  1. Por defecto, entrarán a la sala solo con permiso de lectura, por lo que un ayudante les asignará el rol de editor a les primeres que entren.
  2. Si ya tienen rol de editor, pueden darle este rol a otros estudiantes. Para ello:
    1. Presionen el botón ‘Share’ en la parte superior derecha.
    2. En el cuadro desplegado, cambia el rol de todes les ‘Viewer’ a ‘Editor’ (Si no salen en el cuadro desplegado, recarguen la página)
  3. Para poder ver cómo va quedando su código, despliguen la vista de navegador en el botón ‘View Webpage’ de la parte inferior derecha.
  4. ¡Listo! Ya pueden ponerse a trabajar conjuntamente en su HTML y SVG.

¡Actividad grupal!

Salas y documentos asignados:

Resultados de actividad grupal

Próximos eventos:


Pueden enviar recorrecciones del Hito 1 hasta hoy.


Estamos en plazo de realización de Hito 2, el que termrina el jueves 11 de noviembre .


Se vienen sesiones sobre: Visualización de redes y grafos (jueves 4) .

Brushing, agregación
y vistas en D3.js

Visualización de Información

IIC2026 2021-2


¡Deja tus preguntas en los comentarios!